status/volume: Split indicator into output and input

Use the new privacy indicator class for the input one and move it next
to the other privacy indicators.

While on it move all privacy indicators to the front, following the
system-status-indicators mockup.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2840>

diff --git a/js/ui/panel.js b/js/ui/panel.js
index 33906836025e0ba642a44b3adfac1a1a9b3182d3..073d78b16a4a7c1929c9881d0fbe418b3e2461f7 100644 (file)
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -388,7 +388,8 @@ class QuickSettings extends PanelMenu.Button {
         }
 
         this._system = new SystemStatus.Indicator();
-        this._volume = new VolumeStatus.Indicator();
+        this._volumeOutput = new VolumeStatus.OutputIndicator();
+        this._volumeInput = new VolumeStatus.InputIndicator();
         this._brightness = new BrightnessStatus.Indicator();
         this._remoteAccess = new RemoteAccessStatus.RemoteAccessApplet();
         this._location = new LocationStatus.Indicator();
@@ -401,10 +402,11 @@ class QuickSettings extends PanelMenu.Button {
         this._unsafeMode = new UnsafeModeIndicator();
         this._backgroundApps = new BackgroundAppsStatus.Indicator();
 
-        this._indicators.add_child(this._brightness);
         this._indicators.add_child(this._remoteAccess);
-        this._indicators.add_child(this._thunderbolt);
+        this._indicators.add_child(this._volumeInput);
         this._indicators.add_child(this._location);
+        this._indicators.add_child(this._brightness);
+        this._indicators.add_child(this._thunderbolt);
         this._indicators.add_child(this._nightLight);
         if (this._network)
             this._indicators.add_child(this._network);
@@ -414,12 +416,13 @@ class QuickSettings extends PanelMenu.Button {
             this._indicators.add_child(this._bluetooth);
         this._indicators.add_child(this._rfkill);
         this._indicators.add_child(this._autoRotate);
-        this._indicators.add_child(this._volume);
+        this._indicators.add_child(this._volumeOutput);
         this._indicators.add_child(this._unsafeMode);
         this._indicators.add_child(this._system);
 
         this._addItems(this._system.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
-        this._addItems(this._volume.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
+        this._addItems(this._volumeOutput.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
+        this._addItems(this._volumeInput.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
         this._addItems(this._brightness.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
 
         this._addItems(this._remoteAccess.quickSettingsItems);

diff --git a/js/ui/status/volume.js b/js/ui/status/volume.js
index bc591ac09ab974aee68786e18a1c8a93d94d52e8..ecef81b008e3b7294981cafa7ae6be93e9ef0693 100644 (file)
--- a/js/ui/status/volume.js
+++ b/js/ui/status/volume.js
@@ -1,5 +1,5 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Indicator */
+/* exported OutputIndicator InputIndicator */
 
 const Clutter = imports.gi.Clutter;
 const Gio = imports.gi.Gio;
@@ -407,27 +407,40 @@ class InputStreamSlider extends StreamSlider {
     }
 });
 
-var Indicator = GObject.registerClass(
-class Indicator extends SystemIndicator {
-    _init() {
-        super._init();
+let VolumeIndicator = GObject.registerClass(
+class VolumeIndicator extends SystemIndicator {
+    constructor() {
+        super();
 
-        this._primaryIndicator = this._addIndicator();
-        this._inputIndicator = this._addIndicator();
+        this._indicator = this._addIndicator();
+        this._indicator.reactive = true;
+    }
 
-        this._primaryIndicator.reactive = true;
-        this._inputIndicator.reactive = true;
+    _handleScrollEvent(item, event) {
+        const result = item.slider.scroll(event);
+        if (result === Clutter.EVENT_PROPAGATE || item.mapped)
+            return result;
 
-        this._primaryIndicator.connect('scroll-event',
+        const gicon = new Gio.ThemedIcon({name: item.getIcon()});
+        const level = item.getLevel();
+        const maxLevel = item.getMaxLevel();
+        Main.osdWindowManager.show(-1, gicon, null, level, maxLevel);
+        return result;
+    }
+});
+
+var OutputIndicator = GObject.registerClass(
+class OutputIndicator extends VolumeIndicator {
+    constructor() {
+        super();
+
+        this._indicator.connect('scroll-event',
             (actor, event) => this._handleScrollEvent(this._output, event));
-        this._inputIndicator.connect('scroll-event',
-            (actor, event) => this._handleScrollEvent(this._input, event));
 
         this._control = getMixerControl();
         this._control.connectObject(
             'state-changed', () => this._onControlStateChanged(),
             'default-sink-changed', () => this._readOutput(),
-            'default-source-changed', () => this._readInput(),
             this);
 
         this._output = new OutputStreamSlider(this._control);
@@ -435,54 +448,66 @@ class Indicator extends SystemIndicator {
             const icon = this._output.getIcon();
 
             if (icon)
-                this._primaryIndicator.icon_name = icon;
-            this._primaryIndicator.visible = icon !== null;
+                this._indicator.icon_name = icon;
+            this._indicator.visible = icon !== null;
         });
 
+        this.quickSettingsItems.push(this._output);
+
+        this._onControlStateChanged();
+    }
+
+    _onControlStateChanged() {
+        if (this._control.get_state() === Gvc.MixerControlState.READY)
+            this._readOutput();
+        else
+            this._indicator.hide();
+    }
+
+    _readOutput() {
+        this._output.stream = this._control.get_default_sink();
+    }
+});
+
+var InputIndicator = GObject.registerClass(
+class InputIndicator extends VolumeIndicator {
+    constructor() {
+        super();
+
+        this._indicator.add_style_class_name('privacy-indicator');
+
+        this._indicator.connect('scroll-event',
+            (actor, event) => this._handleScrollEvent(this._input, event));
+
+        this._control = getMixerControl();
+        this._control.connectObject(
+            'state-changed', () => this._onControlStateChanged(),
+            'default-source-changed', () => this._readInput(),
+            this);
+
         this._input = new InputStreamSlider(this._control);
         this._input.connect('stream-updated', () => {
             const icon = this._input.getIcon();
 
             if (icon)
-                this._inputIndicator.icon_name = icon;
+                this._indicator.icon_name = icon;
         });
 
         this._input.bind_property('visible',
-            this._inputIndicator, 'visible',
+            this._indicator, 'visible',
             GObject.BindingFlags.SYNC_CREATE);
 
-        this.quickSettingsItems.push(this._output);
         this.quickSettingsItems.push(this._input);
 
         this._onControlStateChanged();
     }
 
     _onControlStateChanged() {
-        if (this._control.get_state() === Gvc.MixerControlState.READY) {
+        if (this._control.get_state() === Gvc.MixerControlState.READY)
             this._readInput();
-            this._readOutput();
-        } else {
-            this._primaryIndicator.hide();
-        }
-    }
-
-    _readOutput() {
-        this._output.stream = this._control.get_default_sink();
     }
 
     _readInput() {
         this._input.stream = this._control.get_default_source();
     }
-
-    _handleScrollEvent(item, event) {
-        const result = item.slider.scroll(event);
-        if (result === Clutter.EVENT_PROPAGATE || item.mapped)
-            return result;
-
-        const gicon = new Gio.ThemedIcon({name: item.getIcon()});
-        const level = item.getLevel();
-        const maxLevel = item.getMaxLevel();
-        Main.osdWindowManager.show(-1, gicon, null, level, maxLevel);
-        return result;
-    }
 });